<template>
  <div class="main-content" style="padding-top: 60px">
    <div style="display: flex; grid-gap: 20px">
      <!-- 左边分类 -->
      <div style="width: 150px; height: 515px; overflow: auto" class="card">
        <div
          class="category-item"
          :class="{ 'category-item-actice': item.postTypeName === current }"
          @click="selectPostType(item.postTypeName)"
          v-for="item in postType"
          :key="item.postTypeId"
        >
          {{ item.postTypeName }}
        </div>
      </div>

      <!-- 中间帖子内容 -->
      <div
        style="flex: 1; display: flex; height: 515px; overflow: auto"
        class="card"
        v-loading="loading"
      >
        <!-- 左 -->
        <div
          style="flex: 1; text-align: left; padding: 20px; position: relative"
        >
          <div style="height: 85%; width: 100%">
            <div
              v-for="item in posts"
              :key="item.postId"
              style="
                display: flex;
                grid-gap: 15px;
                padding: 20px;
                border: 2px solid #1890ff;
                border-radius: 10px;
                margin-bottom: 26px;
              "
              class="float-div"
              @click="push(item.postId)"
            >
              <div style="flex: 1">
                <div class="oneline petForumTitle" @click="push(item.postId)">
                  {{ item.title }}
                </div>
                <div
                  style="
                    color: #666;
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 1.4em;
                    height: 2.8em;
                  "
                  class="towline"
                >
                  {{ item.introduction }}
                </div>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    margin-top: 10px;
                  "
                >
                  <div style="flex: 1; font-size: 12px; display: flex">
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-user"></i>{{ item.realName }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-view"></i>{{ item.views }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-star-off"></i>{{ item.favorites }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-like"></i>{{ item.likes }}
                    </span>
                  </div>

                  <div
                    style="width: fit-content; margin-top: -5px"
                    class="oneline"
                  >
                    <el-tag
                      type="primary"
                      v-for="(item1, index) in JSON.parse(item.tag)"
                      :key="index"
                      style="margin-right: 10px; font-size: 12px"
                      >{{ item1 }}</el-tag
                    >
                  </div>
                </div>
              </div>
              <div style="width: 175px">
                <img
                  style="width: 100%; height: 100px; border-radius: 5px"
                  :src="item.mediaLink"
                  alt=""
                />
              </div>
            </div>

            <div
              v-if="size === 0"
              style="
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
              "
            >
              <el-empty :image-size="0" />
            </div>
            <!-- 页眉 -->
          </div>
          <span class="page-number">{{ pageNum }}</span>
        </div>

        <!-- 右 -->
        <div
          style="flex: 1; text-align: left; padding: 20px; position: relative"
        >
          <div style="height: 85%; width: 100%">
            <div
              v-for="item in posts1"
              :key="item.postId"
              style="
                display: flex;
                grid-gap: 15px;
                padding: 20px;
                border: 2px solid #1890ff;
                border-radius: 10px;
                margin-bottom: 26px;
              "
              class="float-div"
              @click="push(item.postId)"
            >
              <div style="flex: 1">
                <div class="oneline petForumTitle" @click="push(item.postId)">
                  {{ item.title }}
                </div>
                <div
                  style="
                    color: #666;
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 1.4em;
                    height: 2.8em;
                  "
                  class="towline"
                >
                  {{ item.introduction }}
                </div>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    margin-top: 10px;
                  "
                >
                  <div style="flex: 1; font-size: 12px; display: flex">
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-user"></i>{{ item.realName }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-view"></i>{{ item.views }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-star-off"></i>{{ item.favorites }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-like"></i>{{ item.likes }}
                    </span>
                  </div>

                  <div
                    style="width: fit-content; margin-top: -5px"
                    class="oneline"
                  >
                    <el-tag
                      type="primary"
                      v-for="(item1, index) in JSON.parse(item.tag)"
                      :key="index"
                      style="margin-right: 10px; font-size: 12px"
                      >{{ item1 }}</el-tag
                    >
                  </div>
                </div>
              </div>
              <div style="width: 175px">
                <img
                  style="width: 100%; height: 100px; border-radius: 5px"
                  :src="item.mediaLink"
                  alt=""
                />
              </div>
            </div>

            <div
              v-if="size1 === 0"
              style="
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
              "
            >
              <el-empty :image-size="0" />
            </div>
          </div>
          <!-- 页眉 -->
          <span class="page-number1">{{ pageNum + 1 }}</span>
        </div>
      </div>

      <!-- 左榜单 -->
      <div style="width: 260px; height: 515px; overflow: auto" class="card">
        <div class="card" style="margin-bottom: 5px">
          <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">
            欢迎您！😊
          </div>

          <div style="color: #666; cursor: pointer" @click="handleAdd">
            记录分享萌宠美好的一天
          </div>
        </div>

        <!-- 浏览 -->
        <div class="card" style="margin-bottom: 30px">
          <div
            style="
              display: flex;
              align-items: center;
              padding-bottom: 10px;
              border-bottom: 1px solid #ddd;
            "
          >
            <div style="font-size: 20px; flex: 1">浏览量榜单</div>
            <div
              style="font-size: 12px; color: #666; cursor: pointer"
              @click="refreshViews"
            >
              <i class="el-icon-refresh"></i> 换一换
            </div>
          </div>
          <div>
            <div
              v-for="item in showList"
              :key="item.postId"
              style="margin: 15px 0; text-align: justify"
              class="oneline"
            >
              <span
                style="
                  width: 18px;
                  display: inline-block;
                  text-align: right;
                  margin-right: 10px;
                "
              >
                <span style="color: orangered" v-if="item.index === 1">{{
                  item.index
                }}</span>
                <span style="color: goldenrod" v-else-if="item.index === 2">{{
                  item.index
                }}</span>
                <span style="color: dodgerblue" v-else-if="item.index === 3">{{
                  item.index
                }}</span>
                <span style="color: #000" v-else>{{ item.index }}</span>
              </span>
              <span
                style="color: orangered; cursor: pointer"
                v-if="item.index === 1"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgba(5, 246, 97, 0.481); cursor: pointer"
                v-else-if="item.index === 2"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgb(235, 229, 37); cursor: pointer"
                v-else-if="item.index === 3"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: dodgerblue; cursor: pointer"
                v-else
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
            </div>
          </div>
        </div>

        <!-- 收藏 -->
        <div class="card" style="margin-bottom: 30px">
          <div
            style="
              display: flex;
              align-items: center;
              padding-bottom: 10px;
              border-bottom: 1px solid #ddd;
            "
          >
            <div style="font-size: 20px; flex: 1">收藏量榜单</div>
            <div
              style="font-size: 12px; color: #666; cursor: pointer"
              @click="refreshFavorites"
            >
              <i class="el-icon-refresh"></i> 换一换
            </div>
          </div>
          <div>
            <div
              v-for="item in showFavoriteList"
              :key="item.postId"
              style="margin: 15px 0; text-align: justify"
              class="oneline"
            >
              <span
                style="
                  width: 18px;
                  display: inline-block;
                  text-align: right;
                  margin-right: 10px;
                "
              >
                <span style="color: orangered" v-if="item.index === 1">{{
                  item.index
                }}</span>
                <span style="color: goldenrod" v-else-if="item.index === 2">{{
                  item.index
                }}</span>
                <span style="color: dodgerblue" v-else-if="item.index === 3">{{
                  item.index
                }}</span>
                <span style="color: #000" v-else>{{ item.index }}</span>
              </span>
              <span
                style="color: orangered; cursor: pointer"
                v-if="item.index === 1"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgba(5, 246, 97, 0.481); cursor: pointer"
                v-else-if="item.index === 2"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgb(235, 229, 37); cursor: pointer"
                v-else-if="item.index === 3"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: dodgerblue; cursor: pointer"
                v-else
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
            </div>
          </div>
        </div>
        <!-- 点赞 -->
        <div class="card" style="margin-bottom: 2px">
          <div
            style="
              display: flex;
              align-items: center;
              padding-bottom: 10px;
              border-bottom: 1px solid #ddd;
            "
          >
            <div style="font-size: 20px; flex: 1">点赞量榜单</div>
            <div
              style="font-size: 12px; color: #666; cursor: pointer"
              @click="refreshLikes"
            >
              <i class="el-icon-refresh"></i> 换一换
            </div>
          </div>
          <div>
            <div
              v-for="item in showLikeList"
              :key="item.postId"
              style="margin: 15px 0; text-align: justify"
              class="oneline"
            >
              <span
                style="
                  width: 18px;
                  display: inline-block;
                  text-align: right;
                  margin-right: 10px;
                "
              >
                <span style="color: orangered" v-if="item.index === 1">{{
                  item.index
                }}</span>
                <span style="color: goldenrod" v-else-if="item.index === 2">{{
                  item.index
                }}</span>
                <span style="color: dodgerblue" v-else-if="item.index === 3">{{
                  item.index
                }}</span>
                <span style="color: #000" v-else>{{ item.index }}</span>
              </span>
              <span
                style="color: orangered; cursor: pointer"
                v-if="item.index === 1"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgba(5, 246, 97, 0.481); cursor: pointer"
                v-else-if="item.index === 2"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: rgb(235, 229, 37); cursor: pointer"
                v-else-if="item.index === 3"
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
              <span
                style="color: dodgerblue; cursor: pointer"
                v-else
                @click="push(item.postId)"
                >{{ item.title }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination" style="width: 95%">
      <div>总共：{{ total }}条</div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next,jumper"
        :total="total1"
      />
    </div>
    <!-- 十字上传按钮 -->
    <el-button
      type="primary"
      plain
      class="cross-button"
      @click="handleAdd()"
    ></el-button>
    <!-- ai兽医 -->
    <img style="border-radius: 50%;" width="50px" height="50px" :src="doctorImg" @click="handleAiDialog" class="aiDoctorImg"/>
    <!-- 新增dialog -->
    <el-dialog
      title="发布帖子"
      v-model="dialogFormVisible"
      width="60%"
      top="5px"
    >
      <el-form :model="addpost">
        <el-form-item
          label="标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题"
          :label-width="formLabelWidth"
        >
          <el-input v-model="addpost.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型"
          :label-width="formLabelWidth"
        >
          <el-select v-model="addpost.postTypeId" style="width: 100%">
            <el-option
              v-for="item in postType1"
              :key="item.postTypeId"
              :value="item.postTypeId"
              :label="item.postTypeName"
              style="padding: 0 15px"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addpost.introduction"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="封&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;面"
          :label-width="formLabelWidth"
        >
          <single-upload v-model="imgurl"></single-upload>
          <!-- 预览图片 -->
          <div style="text-align: left; margin-left: 6%">
            <img width="120" height="70" :src="imgurl" alt="" />
          </div>
        </el-form-item>
        <el-form-item
          label="标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="tagsArr"
            multiple
            filterable
            allow-create
            default-first-option
            style="width: 100%"
          >
            <el-option style="padding: 0 15px" value="猫"></el-option>
            <el-option style="padding: 0 15px" value="狗"></el-option>
            <el-option style="padding: 0 15px" value="乌龟"></el-option>
            <el-option style="padding: 0 15px" value="鱼"></el-option>
            <el-option style="padding: 0 15px" value="鸟"></el-option>
            <el-option style="padding: 0 15px" value="宠物"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="可见范围" :label-width="formLabelWidth">
          <el-select v-model="addpost.visibility" style="width: 100%">
            <el-option
              :value="'公开'"
              label="公开"
              style="padding: 0 15px"
            ></el-option>
            <el-option
              :value="'私密'"
              label="私密"
              style="padding: 0 15px"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容"
          prop="content"
          style="margin-left: 52px"
        >
          <div id="editor" style="text-align: justify; width: 80%"></div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="padding: 0 15px"
          >取 消</el-button
        >
        <el-button type="primary" @click="addPost" style="padding: 0 15px"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- ai聊天对话框 -->
    <div style="text-align: left">
          <el-dialog
            v-model="aiDialog"
            title="萌宠简坛AI兽医"
            :width="800"
            center
            top="2vh"
          >
            <div
              style="
                background-color: #666;
                margin-top: -30px;
                border-radius: 5%;
                height: 552px;
              "
            >
              <div
                class="chat-list"
                ref="chatList"
                style="height: 420px; overflow-y: auto"
              >
                <div
                  v-for="(item, index) in chats"
                  :key="index"
                  :class="[
                    item.senderId == 1
                      ? 'chat-list-left'
                      : 'chat-list-right',
                  ]"
                >
                  <img
                    :src="
                      item.senderId == 1
                        ? this.doctorImg
                        : this.loginImg
                    "
                    class="list-img"
                  />
                  <div
                    :class="
                      item.senderId == 1 ? 'left-msg' : 'right-msg'
                    "
                    style="padding: 5px"
                  >
                    {{ item.message }}
                  </div>
                </div>
              </div>
              <div style="padding: 10px">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="Please input"
                  v-model="text"
                />
                <div style="text-align: right; margin-top: 5px">
                  <el-button type="primary" style="padding: 10px;" @click="send()"> 发送 </el-button>
                </div>
              </div>
            </div>
          </el-dialog>
    </div>
  </div>
</template>

<script>
//富文本
import E from "wangeditor";
import hljs from "highlight.js";
import { policy } from "@/components/upload/policy";
import { getUUID } from "@/utils";
import $ from "jquery";
import SingleUpload from "@/components/upload/singleUpload";

//请求
import request from "@/utils/request";

export default {
  name: "Home",
  components: { SingleUpload },
  data() {
    return {
      // 当前选中类型
      current: "全部帖子",
      pageNum: 1,
      pageSize: 3,
      postType: [],
      posts: [], //左边部分帖子
      posts1: [], //右边部分帖子，页码笔左边部分帖子加一
      size: 0, //左边部分当前页大小是否有数据
      size1: 0, //右边部分当前页大小，用来判断当前页是否有数据
      total: 0, //总数
      total1: 0, //用于分页的总数
      currentPage: 1, //用于展示当前页数，注意此时和pageNum不同，需要共同作用
      viewsList: [], //用于存储浏览量榜单数据
      showList: [], //用于展示的浏览量榜单数据
      lastIndex: 0, //用于控制展示的浏览量榜单数据
      FavoritesList: [], //用于存储收藏量榜单数据
      showFavoriteList: [], //用于展示的收藏量榜单数据
      lastFavoriteIndex: 0, //用于控制展示的收藏量榜单数据
      LikesList: [], //用于存储点赞量榜单数据
      showLikeList: [], //用于展示的点赞量榜单数据
      lastLikeIndex: 0, //用于控制展示的点赞量榜单数据
      dialogFormVisible: false, //新增对话框
      formLabelWidth: 120,
      imgurl:
        "https://img2.baidu.com/it/u=1180501423,3481389981&fm=253&fmt=auto&app=138&f=JPEG?w=745&h=500", //存储临时封面
      tagsArr: [], //临时标签
      addpost: {}, //用于存储上传的帖子
      editor: null, //富文本
      postType1: [], //用于存储上传的类型
      doctorImg:require("@/assets/doctor.png"),//宠物ai医生图片
      loginImg:JSON.parse(sessionStorage.getItem("user")).avatar,
      aiDialog:false,
      chats:[{"senderId":1,"friendId":0,"message":"萌宠简坛AI将为您服务，有什么有关宠物的问题，都可以随时问我哦~🙂"}],//ai聊天记录
      text:'',//发送的消息内容
    };
  },
  mounted() {},
  created() {
    this.load();
    this.loadPage();
    this.refreshViews();
    this.refreshFavorites();
    this.refreshLikes();
  },
  methods: {
    // 查询所有的一个帖子类型
    load() {
      request.get("/postType/select").then((res) => {
        this.postType = res.data || [];
        this.postType1 = this.postType.slice();
        this.postType.unshift({ postTypeName: "全部帖子" });
        // 使用 slice 方法进行浅拷贝
      });
    },

    //分页查询帖子
    loadPage() {
      this.loading = true;
      let url =
        "/post/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize;
      if (this.current !== "全部帖子") {
        url += "&postTypeName=" + this.current;
      }
      request.post(url).then((res) => {
        this.posts = res.data.list;
        this.size = res.data.size;
      });
      url =
        "/post/page?pageNum=" +
        (this.pageNum + 1) +
        "&pageSize=" +
        this.pageSize;
      if (this.current !== "全部帖子") {
        url += "&postTypeName=" + this.current;
      }
      request.post(url).then((res) => {
        this.posts1 = res.data.list;
        this.size1 = res.data.size;
        this.total1 = res.data.total / 2;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    addPost() {
      this.addpost.mediaLink = this.imgurl;
      this.addpost.tag = JSON.stringify(this.tagsArr);
      this.addpost.content = this.editor.txt.html();
      let user = sessionStorage.getItem("user");
      let userId = JSON.parse(user).userId;
      this.addpost.userId = userId;

      //调用后端修改接口
      request
        .put("/post/", JSON.stringify(this.addpost))
        .then((res) => {
          //请求成功后
          //这里简化了
          if (res.code === 0) {
            //提示成
            this.$message({
              showClose: true,
              message: "发布帖子成功,请等待管理员的审核！",
              type: "success",
            });

            //关闭窗口
            this.dialogFormVisible = false;
            //重新加载数据
            this.load();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("axios error: " + err);
        });
    },
    //处理发布帖子
    handleAdd() {
      //对话框显示
      this.dialogFormVisible = true;
      this.setRichText();
    },
    //富文本
    setRichText() {
      this.$nextTick(() => {
        if (this.editor != null) {
          this.editor.destroy(); //这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
        }
        this.editor = new E("#editor");

        //不需要使用i18next时设置为null，要不然控制台第二次初始化的时候会把报错
        this.editor.i18next = null;
        this.editor.highlight = hljs;
        this.editor.config.customUploadImg = (files, insertImgFn) => {
          // 获取签名等信息，此处使用 policy() 方法
          policy()
            .then((response) => {
              console.log(response.data);
              let key = response.data.dir + getUUID() + "_${filename}";
              let url =
                response.data.host +
                "/" +
                key.replace("${filename}", files[0].name);
              const formData = new FormData();
              formData.append("key", key);
              formData.append("ossaccessKeyId", response.data.accessid);
              formData.append("policy", response.data.policy);
              formData.append("signature", response.data.signature);
              formData.append("dir", response.data.dir);
              formData.append("host", response.data.host);
              formData.append("file", files[0]); // 只上传第一个文件，你可以根据需求修改
              console.log(url);
              // 通过 AJAX 或其他方法上传图片到阿里云 OSS
              $.ajax({
                url: response.data.host,
                type: "POST",
                contentType: false,
                processData: false,
                data: formData,
                success: function (res) {
                  // 上传成功后处理
                  insertImgFn(url);
                },
                error: function (res) {
                  console.error(res);
                },
              });
            })
            .catch((err) => {
              console.error(err);
            });
        };
        this.editor.config.customUploadVideo = (resultFiles,insertVideoFn)=>{
          policy()
            .then((response) => {
              console.log(response.data);
              let key = response.data.dir + getUUID() + "_${filename}";
              let url =
                response.data.host +
                "/" +
                key.replace("${filename}", resultFiles[0].name);
              const formData = new FormData();
              formData.append("key", key);
              formData.append("ossaccessKeyId", response.data.accessid);
              formData.append("policy", response.data.policy);
              formData.append("signature", response.data.signature);
              formData.append("dir", response.data.dir);
              formData.append("host", response.data.host);
              formData.append("file", resultFiles[0]); // 只上传第一个文件，你可以根据需求修改
              console.log(url);
              // 通过 AJAX 或其他方法上传图片到阿里云 OSS
              $.ajax({
                url: response.data.host,
                type: "POST",
                contentType: false,
                processData: false,
                data: formData,
                success: function (res) {
                  // 上传成功后处理
                  insertVideoFn(url);
                },
                error: function (res) {
                  console.error(res);
                },
              });
            })
            .catch((err) => {
              console.error(err);
            });
        }

        this.editor.create(); // 创建
      });
    },
    refreshLikes() {
      request.get("/post/selectLikes").then((res) => {
        this.LikesList = res.data || [];
        let i = 1;
        this.LikesList.forEach((item) => (item.index = i++));

        // 0  5  0
        if (this.lastLikeIndex === 20) {
          this.lastLikeIndex = 0;
        }
        this.showLikeList = this.LikesList.slice(
          this.lastLikeIndex,
          this.lastLikeIndex + 5
        ); // 0-5   5- 10  // 0-5
        this.lastLikeIndex += 5; //
      });
    },

    refreshViews() {
      request.get("/post/selectViews").then((res) => {
        this.viewsList = res.data || [];
        let i = 1;
        this.viewsList.forEach((item) => (item.index = i++));

        // 0  5  0
        if (this.lastIndex === 20) {
          this.lastIndex = 0;
        }
        this.showList = this.viewsList.slice(
          this.lastIndex,
          this.lastIndex + 5
        ); // 0-5   5- 10  // 0-5
        this.lastIndex += 5; //
      });
    },
    refreshFavorites() {
      request.get("/post/selectFavorites").then((res) => {
        this.FavoritesList = res.data || [];
        let i = 1;
        this.FavoritesList.forEach((item) => (item.index = i++));

        // 0  5  0
        if (this.lastFavoriteIndex === 20) {
          this.lastFavoriteIndex = 0;
        }
        this.showFavoriteList = this.FavoritesList.slice(
          this.lastFavoriteIndex,
          this.lastFavoriteIndex + 5
        ); // 0-5   5- 10  // 0-5
        this.lastFavoriteIndex += 5; //
      });
    },

    // 选择类型
    selectPostType(postTypeName) {
      this.current = postTypeName;
      this.loadPage();
    },
    //改变每页记录数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //当前用户选择的每页显示几条记录呢
      this.pageSize = val;
      this.currentPage = 1;
      this.pageNum = 1;
      //重新调用
      this.loadPage();
    },
    //翻页(点击页码)
    handleCurrentChange(val) {
      this.currentPage = val;

      this.pageNum = val * 2 - 1;
      this.loadPage(); // 获取新的数据
    },
    //导航到
    push(postId) {
      this.$router.push(`/user/postDetail?postId=${postId}`);
    },
    //ai聊天
    send(){
      //设置1为用户 0为ai
      this.chats.push({"senderId":0,"friendId":1,"message":this.text})
      this.chats.push({"senderId":1,"friendId":0,"message":"萌宠简坛AI响应中...请稍后"})
      this.$nextTick(() => {
          this.scrollToBottom(); // 调用滚动到底部方法
      });
      request.post("/ai",{"message":this.text}).then((res)=>{
        this.text='';
        this.chats.splice(-1, 1,{"senderId":1,"friendId":0,"message":res.data})
      }).then(()=>{
        this.$nextTick(() => {
          this.scrollToBottom(); // 调用滚动到底部方法
        });
      })
    },
    handleAiDialog(){
      this.aiDialog=true;
      this.$nextTick(() => {
          this.scrollToBottom(); // 调用滚动到底部方法
      });
    },
    scrollToBottom() {
      let chatList = this.$refs.chatList;
      // 确保 chatList 存在
      if (chatList) {
        // 将滚动条滚动到底部
        chatList.scrollTop = chatList.scrollHeight;
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.main-content {
  width: 85%;
  margin: 5px auto;
}
/* 防止缩小后样式发生改变 */
@media screen and (max-width: 768px) {
  .main-content {
    width: 100%; /* 在小屏幕下铺满整个宽度 */
    padding: 0 10px; /* 添加一些 padding 来保持内容与屏幕边缘的距离 */
  }
}
.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-actice {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.petForumTitle {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.petForumTitle:hover {
  color: #1890ff;
}
/* 超双行省略 */
.towline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
}
/* 超单行省略 */
.oneline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 超出几行省略 */
  overflow: hidden;
}
/* 翻页 */
.pagination {
  text-align: center;
  margin-top: 20px; /* 根据需要调整与帖子内容的间距 */
}
/* 浮动动画 */
.float-div {
  animation: floatAnimation 3s infinite ease-in-out; /* 持续浮动的动画 */
  cursor: pointer;
}
.float-div:hover {
  animation-play-state: paused; /* 鼠标移入时停止动画 */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /*起到一个强调的效果*/
}
@keyframes floatAnimation {
  0% {
    transform: translate(0px, 0px); /* 初始位置 */
  }
  50% {
    transform: translate(-5px, -5px); /* 向左上方浮动 */
  }
  100% {
    transform: translate(0px, 0px); /* 回到初始位置 */
  }
}
/* 页眉 */
.page-number {
  position: fixed;
  bottom: 16%;
  left: 15%;
  transform: translate(0, 100%);
  color: #666;
  font-size: 14px;
}
.page-number1 {
  position: fixed;
  bottom: 16%;
  right: 22%;
  transform: translate(0, 100%);
  color: #666;
  font-size: 14px;
}
/* 滚动条 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
  max-height: 5px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #1890ff;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

/* 十字按钮css */
.cross-button {
  position: fixed;
  bottom: 10px;
  right: 20px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.cross-button::before,
.cross-button::after {
  content: "";
  position: absolute;
  background-color: #6bb6ff;
}

.cross-button::before {
  height: 2px;
  width: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cross-button::after {
  height: 30px;
  width: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.aiDoctorImg{
  position: fixed;
  bottom: 10px;
  left: 20px;
  border: #6bb6ff solid 1px;
  cursor: pointer;
}
.list-img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
chat-list {
  display: flex;
  flex-direction: column;
}
.chat-list-left {
  padding: 20px;
  display: flex;
  flex-direction: row;
}
.chat-list-right {
  padding: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.list-img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.left-msg {
  margin-left: 7px;
  background-color: #ffffff;
  font-size: 15px;
  border-radius: 6px;
  max-width: 200px;
  word-wrap: break-word;
  font-weight: 530;
 
}
.right-msg {
  margin-right: 7px;
  background-color: #46a6ff;
  font-size: 15px;
  border-radius: 6px;
  max-width: 200px;
  word-wrap: break-word;
  font-weight: 530;
}

</style>
